<script type="text/x-template" id="push-notification-details">
    <div v-bind:class="[componentId]">
        <cly-header class="cly-vue-push-notification-details-header">
            <template v-slot:header-left>
                <h2> {{pushNotification.name || '-' }} </h2>
            </template>
            <template v-slot:header-top>
                <cly-back-link link="/messaging" :title="i18n('push-notification-details.back-to')"></cly-back-link>
            </template>
            <template v-slot:header-right>
                <template>
                    <el-button v-if="shouldShowRejectUserCommand(pushNotification.status)" @click="onReject(pushNotification._id)" class="bu-mr-2"> <i class="ion-close-circled" ></i> {{i18n('push-notification.reject')}} </el-button>
                    <el-button v-if="shouldShowApproveUserCommand(pushNotification.status)" @click="onApprove(pushNotification._id)" class="bu-mr-2 bu-ml-0"> <i class="ion-checkmark-circled" ></i> {{i18n('push-notification.approve')}} </el-button>
                </template>
                <cly-more-options size="small" @command="handleUserCommands($event, pushNotification._id)">
                    <el-dropdown-item v-if="shouldShowStartUserCommand(pushNotification.status)" :command="UserCommandEnum.START">{{i18n('push-notification.start')}} </el-dropdown-item>
                    <el-dropdown-item v-if="shouldShowStopUserCommand(pushNotification.status)" :command="UserCommandEnum.STOP">{{i18n('push-notification.stop')}} </el-dropdown-item>
                    <el-dropdown-item v-if="shouldShowEditUserCommand(pushNotification.status)" :command="UserCommandEnum.EDIT">{{i18n('push-notification.edit')}}</el-dropdown-item>
                    <el-dropdown-item v-if="shouldShowEditDraftUserCommand(pushNotification.status)" :command="UserCommandEnum.EDIT_DRAFT">{{i18n('push-notification.edit-draft')}}</el-dropdown-item>
                    <el-dropdown-item v-if="shouldShowEditRejectUserCommand(pushNotification.status)" :command="UserCommandEnum.EDIT_REJECT">{{i18n('push-notification.edit')}}</el-dropdown-item>
                    <el-dropdown-item v-if="shouldShowDuplicateUserCommand(pushNotification.status)" :command="UserCommandEnum.DUPLICATE">{{i18n('push-notification.duplicate')}}</el-dropdown-item>
                    <el-dropdown-item v-if="shouldShowDeleteUserCommand(pushNotification.status)"  :command="UserCommandEnum.DELETE">{{i18n('push-notification.delete')}}</el-dropdown-item>
                    <el-dropdown-item v-if="shouldShowResendUserCommand(pushNotification.status)" :command="UserCommandEnum.RESEND">{{i18n('push-notification.resend')}}</el-dropdown-item>
                </cly-more-options>
            </template>
            <template v-slot:header-bottom>
                <div class="bu-level-item cly-vue-push-notification-details-sub-header">
                    <cly-status-tag size="small" :text="statusOptions[pushNotification.status] && statusOptions[pushNotification.status].label || '' " :color="getStatusBackgroundColor(pushNotification.status)"></cly-status-tag>
                </div>
                <div class="bu-level-item cly-vue-push-notification-details-sub-header">
                    <div class="text-medium color-cool-gray-50"><i class="far fa-clock bu-pr-1"></i></div>
                    <span class="cly-vue-push-notification-details-sub-header-title"> {{i18n('push-notification-details.created-by',pushNotification.createdAt,pushNotification.createdBy)}}</span>
                </div>
                <div class="bu-level-item cly-vue-push-notification-details-sub-header">
                    <div class="text-medium color-cool-gray-50" style="padding-right: 5.33px;"><i class="ion-pricetag"></i></div>
                    <span class="cly-vue-push-notification-details-sub-header-title"> {{i18n('push-notification-details.message-id')}} {{pushNotification._id}} </span>
                </div>
            </template>
        </cly-header>
        <cly-main>
            <div>
                <div class="bu-level-left" style="margin-bottom:32px">
                    <div class="bu-level-item bu-mr-1">
                        <div class="cly-vue-platform-filter-label"> 
                            {{i18n('push-notification-details.results-for')}}
                        </div>
                    </div>
                    <div class="bu-level-item bu-mr-1">
                        <el-select :arrow="false" :adaptiveLength="true" v-model="selectedPlatformFilter" :disabled="!platformFilterOptions.length">
                            <el-option v-for="item in platformFilterOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
                        </el-select>
                    </div>
                    <div class="bu-level-item bu-mr-1">
                        <div class="cly-vue-platform-filter-label"> 
                            {{i18n('push-notification-details.and-label')}}
                        </div>
                    </div>
                    <div class="bu-level-item bu-mr-1">
                        <el-select  :placeholder="i18n('push-notification.all-localizations')" :arrow="false" :adaptiveLength="true" v-model="selectedLocaleFilter" :disabled="!localeFilterOptions.length">
                            <el-option v-for="item in localeFilterOptions" :key="item.value" :value="item.value" :label="item.label"></el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <cly-section>
                <div class="bu-is-flex cly-vue-push-notification-details-chart-bars">
                    <div class="bu-is-flex bu-is-flex-direction-column cly-vue-push-notification-details-chart-bars__item cly-vue-push-notification-details-chart-bars__border-right">
                        <cly-chart-bar :option="pushNotificationChartBars.targetedUsers" :loading="isLoading" :legend="chartBarLegend" :showZoom=false :showToggle=false :showDownload=false ></cly-chart-bar>
                        <div class="cly-vue-push-notification-details-chart-bars__item-legend cly-vue-push-notification-details-chart-bars__border-right"> 
                            <div class="bu-my-4 bu-ml-6"> 
                                <div class="text-medium"> {{i18n('push-notification.users-targeted')}}  <cly-tooltip-icon :tooltip="i18n('push-notification.users-targeted-description')" icon="ion ion-help-circled" class="bu-ml-1"> </cly-tooltip-icon> </div>
                                <div class="cly-vue-push-notification-details-chart-bars__item-legend-percentage"> {{targetedUsers}}% </div>
                                <div class="text-medium">{{selectedDashboard.processed || 0}} {{i18n('push-notification.users')}}</div>
                            </div>
                        </div>
                    </div>
                    <div class="bu-is-flex bu-is-flex-direction-column cly-vue-push-notification-details-chart-bars__item cly-vue-push-notification-details-chart-bars__border-right"> 
                        <cly-chart-bar :option="pushNotificationChartBars.sentPushNotifications" :loading="isLoading" :legend="chartBarLegend" :showZoom=false :showToggle=false :showDownload=false ></cly-chart-bar>
                        <div class="cly-vue-push-notification-details-chart-bars__item-legend cly-vue-push-notification-details-chart-bars__border-right"> 
                            <div class="bu-my-4 bu-ml-6"> 
                                <div class="text-medium"> {{i18n('push-notification.sent-notifications')}}  <cly-tooltip-icon :tooltip="i18n('push-notification.sent-notifications-description')" icon="ion ion-help-circled" class="bu-ml-1"> </cly-tooltip-icon> </div>
                                <div class="cly-vue-push-notification-details-chart-bars__item-legend-percentage"> {{sentPushNotifications}}% </div>
                                <div class="text-medium">{{selectedDashboard.sent || 0}} {{i18n('push-notification.users')}}<span v-if="shouldShowGoToSentUrl" @click="onGoToSent"><i class="cly-icon-btn cly-icon-arrow_forward-circled"></i></span>  </div>
                            </div>
                        </div>
                    </div>
                    <div class="bu-is-flex bu-is-flex-direction-column cly-vue-push-notification-details-chart-bars__item cly-vue-push-notification-details-chart-bars__border-right"> 
                        <cly-chart-bar :option="pushNotificationChartBars.clickedPushNotifications" :loading="isLoading" :legend="chartBarLegend" :showZoom=false :showToggle=false :showDownload=false ></cly-chart-bar>
                        <div class="cly-vue-push-notification-details-chart-bars__item-legend cly-vue-push-notification-details-chart-bars__border-right"> 
                            <div class="bu-my-4 bu-ml-6"> 
                                <div class="text-medium"> {{i18n('push-notification.clicked-notifications')}} <cly-tooltip-icon :tooltip="i18n('push-notification.clicked-notifications-description')" icon="ion ion-help-circled" class="bu-ml-1"> </cly-tooltip-icon> </div>
                                <div class="cly-vue-push-notification-details-chart-bars__item-legend-percentage"> {{clickedPushNotifications}}% </div>
                                <div class="text-medium"> {{selectedDashboard.actioned || 0}} {{i18n('push-notification.users')}}<span v-if="shouldShowGoToActionedUrl" @click="onGoToActioned"><i class="cly-icon-btn cly-icon-arrow_forward-circled"></i></span> </div>
                            </div>
                        </div>
                    </div>
                    <div class="bu-is-flex bu-is-flex-direction-column cly-vue-push-notification-details-chart-bars__item"> 
                        <cly-chart-bar :option="pushNotificationChartBars.failedPushNotifications" :loading="isLoading" :legend="chartBarLegend" :showZoom=false :showToggle=false :showDownload=false ></cly-chart-bar>
                        <div class="cly-vue-push-notification-details-chart-bars__item-legend"> 
                            <div class="bu-my-4 bu-ml-6 bu-is-flex bu-is-flex-direction-column"> 
                                <div class="text-medium bu-is-flex bu-is-justify-content-space-between"> 
                                    <div>
                                        {{i18n('push-notification.failed')}} 
                                        <cly-tooltip-icon :tooltip="i18n('push-notification.failed-description')" icon="ion ion-help-circled" class="bu-ml-1"></cly-tooltip-icon>
                                    </div>
                                    <div>
                                        <a href="#" @click.prevent="downloadLogs" class="text-smallish bu-mr-4 font-weight-bold bu-is-underlined">{{i18n('push-notification.download-logs')}}</a>
                                    </div>
                                </div>
                                <div class="cly-vue-push-notification-details-chart-bars__item-legend-percentage"> {{failedPushNotifications}}% </div>
                                <div class="text-medium"> {{selectedDashboard.errored || 0}} {{i18n('push-notification.users')}}<span v-if="shouldShowGoToErroredUrl" @click="onGoToErrored"><i class="cly-icon-btn cly-icon-arrow_forward-circled"></i></span> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </cly-section>
            <div class="cly-vue-push-notification-details-summary">
                <div style="width: calc(100% - 72px); display: flex; align-items: end;">
                    <div style="width: 83.133333%; padding-right: 24px; padding-top: 48px">
                        <div class="bu-py-3" style="display: flex; align-items: baseline;">
                            <h3>{{i18n('push-notification-details.summary-header')}}</h3>
                            <cly-tooltip-icon :tooltip="i18n('push-notification-details.summary-header-description')" icon="ion ion-help-circled" style="margin-left:8px"> </cly-tooltip-icon>
                        </div>
                        <div>
                            <cly-dynamic-tabs :custom-icon="customIcon" v-model="currentSummaryTab" skin="secondary" :tabs="summaryTabs"></cly-dynamic-tabs>
                        </div>
                    </div>
                    <div style="width: 16.166667%; padding-right: 24px">
                        <mobile-message-preview 
                            :title="message.title"
                            :subtitle="pushNotification.settings[this.PlatformEnum.IOS].subtitle"
                            :content="message.content" 
                            :platforms="pushNotification.platforms" 
                            :media="previewMessageMedia" 
                            :buttons="message.buttons.map(function(item){return item.label})" 
                            @select="onMobileMessagePlatformChange"
                            class="cly-vue-push-notification-details-summary__message-preview"> 
                        </mobile-message-preview>
                    </div>
                </div>
            </div>
        </cly-main>
        <push-notification-drawer @onClose="onDrawerClose" :controls="drawers.pushNotificationDrawer" :type="pushNotification.type" :userCommand="userCommand.type" :id="userCommand.pushNotificationId" :isOpened="isDrawerOpen"></push-notification-drawer>
    </div>
</script>
